<template>
    <div class="setting">
        <div class="u-i-top bg">
            <span class="u-i-t_title">我</span>
            <!-- <div class="u-i-t_setting" @click="goToSetting()">
                <img src="/src/assets/setting.png" alt="设置">
            </div> -->
        </div>
        <div class="u-i-content">
            <div class="u-i-c_userInfo mt border f-l-r bg" @click="goToLogin()" v-if="!isLogin">
                <div class="avator"></div>
                <div class="u-i-c_u_right">
                    <div class="f-b-r">
                        <div class="unlogin">
                            <span class="u-span">登录 / 注册</span>
                        </div>
                        <div class="more"><svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg></div>
                    </div>
                </div>
            </div>
            <div class="u-i-c_userInfo mt border f-l-r bg" @click="goToMyInfo()" v-else>
                <div class="avator">
                    <img :src="(getUserInfo.avator &&  getUserInfo.avator != '') ? getUserInfo.avator : getAssetsFile('default-avator.png')" alt="">
                </div>
                <div class="u-i-c_u_right">
                    <div class="f-b-r">
                        <div class="user-login f-b-r">
                            <div class="u-l_left">
                                <div>{{ getUserInfo.nickname }}</div>
                                <div class="edit">编辑个人信息</div>
                            </div>
                            <div class="u-l_right">主页</div>
                        </div>
                        <div class="more"><svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg></div>
                    </div>
                </div>
            </div>
            <div class="plr1 mt bg">
                <div class="f-b-r ptb05" :class="{'setting': isLogin}"  v-if="isLogin" @click="openBindEmail">
                    <div>绑定邮箱</div>
                    <div><svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg></div>
                </div>
                <div class="f-b-r ptb05" @click="changeDarkModel">
                    <div>夜间模式</div>
                    <div class="switch_btn border" :class="{ 's-b-active': darkModel }">
                        <div class="s-b_bot bg" :class="{ 's-b_bot_active': darkModel }"></div>
                    </div>    
                </div>
            </div>
            <div class="plr1 mt bg">
                <div class="f-b-r ptb05" :class="{'setting': isLogin}" @click="goToAbout()">
                    <div>关于我们</div>
                    <div><svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg></div>
                </div>
                <div class="f-b-r ptb05" @click="loginOut()" v-if="isLogin">
                    <div>退出登录</div>
                    <div><svg t="1675349184899" class="icon va-m" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8462" width="16" height="16"><path d="M492.675886 904.817574L885.696074 511.797385 492.675886 118.777197c-12.258185-12.258185-12.432147-32.892131 0.187265-45.51052 12.707416-12.707416 32.995485-12.703323 45.511543-0.187265l411.660734 411.660734c7.120165 7.120165 10.163477 17.065677 8.990768 26.624381 1.500167 9.755178-1.5104 20.010753-8.990768 27.491121L538.374694 950.515359c-12.258185 12.258185-32.892131 12.432147-45.511543-0.187265-12.707416-12.707416-12.703323-32.995485-0.187265-45.51052z" p-id="8463" fill="#BABABA"></path></svg></div>    
                </div>
            </div>
        </div>
        <van-dialog class="bind-email" v-model:show="isShowBindEmail" title="绑定邮箱" show-cancel-button @confirm="onConfirm" @cancel="onCancel" :before-close="beforeClose">
            <!-- <img src="https://fastly.jsdelivr.net/npm/@vant/assets/apple-3.jpeg" /> -->
            <div>
                邮箱号码：
                <input type="text" v-model="bindEmail" @input="vaildEmail">
            </div>
            <div class="empty-tip" v-if="emailTip">请输入正确格式的邮箱</div>
        </van-dialog>
    </div>
    <error-alert :message="errorMessage" ref="showErrorAlert"></error-alert>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRouter } from 'vue-router'
import userStore from '../user.store'
import overallStore from '@/store/index'
import { getAssetsFile } from '@/utils/util'
import settingStore from './setting.store'

const router = useRouter()
const userSe = userStore() 
const settingSe = settingStore()
const overallSe = overallStore()
const isLogin = computed(() => {
    return sessionStorage.getItem('token') ? true : false
})

const getUserInfo = computed(() => {
    return overallSe.getUserInfo
})
// const coverUrl = computed(() => {
//     return coverUrl.value = (getUserInfo.avator &&  getUserInfo.avator != '') ? getUserInfo.avator : getAssetsFile('default-avator.png')
// })

const goToSetting = () => {
    router.push({
        name: 'setting'
    })
}

const goToMyInfo = () => {
    router.push({
        name: 'myInfo'
    })
}

const goToLogin = () => {
    router.push({
        name: 'userIdLogin'
    })
}

const goToAbout = () => {
    router.push({
        name: 'about'
    })
}

const loginOut = () => {
    // overallSe.getLoginOut()
    sessionStorage.removeItem('userInfo')
    sessionStorage.removeItem('token')
    router.push({
        name: 'userIdLogin'
    })
}

// let darkModel = ref<boolean>(false)
let darkModel = computed(() => {
    return settingSe.getDarkModel
})
const changeDarkModel = () => {
    // darkModel.value = !darkModel.value
    settingSe.setDarkModel(!darkModel.value)
}

// 绑定邮箱
let isShowBindEmail = ref<boolean>(false)
let emailTip = ref<boolean>(false)
let bindEmail = ref<string>('')
// 校验邮箱输入
let regx = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
const vaildEmail = (val: any) => {
    if(regx.test(bindEmail.value)) {
        emailTip.value = false
    } 
} 
// 点击确认
let errorMessage = ref<string>('')
let showErrorAlert = ref<any>(null)
const onConfirm = () => {
    if(!regx.test(bindEmail.value)) {
        emailTip.value = true
        isShowBindEmail.value = true
        return
    } else {
        emailTip.value = false
    }
    const data = {
        u_email: bindEmail.value
    }
    settingSe.bindEmail(data).then((res: any) => {
        isShowBindEmail.value = false
        bindEmail.value = ''
        if(res.status == 'success') {
            errorMessage.value = '绑定邮箱成功'
            showErrorAlert.value.showErrorAlert()
        } else {
            errorMessage.value = res.errMessage
            showErrorAlert.value.showErrorAlert()
        }
    })
}
// 点击取消
const onCancel = () => {
    isShowBindEmail.value = false
}
// 打开弹窗
const openBindEmail = () => {
    emailTip.value = false
    isShowBindEmail.value = true
}
// 关闭窗口前的回调
const beforeClose = () => {
    return false
}
</script>

<style lang="less" scoped>
.setting {
    position: relative;
    width: 100%;
    background-color: var(--bg-color);

    .u-i-top {
        background-color: var(--bg-color);
        width: 100%;
        height: var(--navigation-bar-height);
        line-height:  var(--navigation-bar-height);
        text-align: center;
        .u-i-t_title {
            color: var(--font-color-black);
        }
        
        .u-i-t_setting {
            position: absolute;
            right: 1rem;
            top: 0;

            img {
                width: 1.3rem;
                height: 1.3rem;
                vertical-align: middle;
            }
        }
    }

    .u-i-content {
        width: 100%;
        min-height: calc(100vh - 2.5rem);
        background-color: var(--content-background-color);
        overflow: hidden;

        .u-i-c_userInfo {
            width: 100%;
            height: 5rem;
            padding: 0.8rem 1rem;

            .avator{
                width: 3.2rem;
                height: 3.2rem;
                background: #373737;
                margin-right: 1rem;
                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .u-i-c_u_right {
                flex: 1;
                .u-span, .user-login {
                    flex: 1;
                    font-size: 14px;

                    .edit {
                        font-size: 13px;
                        color: var(--placeholder-color);
                    }
                }

                .u-l_right {
                    color: var(--font-color-gray);
                    padding-right: 0.5rem;
                }
            }
        }

        .setting {
            // box-shadow: 0 0.5px 0 var(--placeholder-color);
            border-bottom: 0.5px solid var(--placeholder-color);
        }

        .switch_btn {
            width: 2.2rem;
            height: 1.4rem;
            background-color: #BEBEBE;
            border-radius: 0.7rem;
            position: relative;
            padding: 0.1rem 0.1rem;

            .s-b_bot {
                position: absolute;
                top: 0.05rem;
                left: 0.05rem;
                width: 1.3rem;
                height: 1.3rem;
                border-radius: 0.6rem;
                transition: all 0.3s;
            }

            .s-b_bot_active {
                top: 0.05rem;
                left: 0.85rem !important;
                background-color: #403e3e;
            }
        }

        .s-b-active {
            background-color: red;
        }
    }
}

:deep(.bind-email) {
    .van-dialog__content {
        padding: 2rem 0;
        text-align: center;
        input {
            width: 13rem;
            height: 2rem;
            border-radius: 1rem;
            border: 1px solid var(--font-color-black);
            color: var(--font-color-black);
            padding: 0 0.5rem;
            background-color: transparent;
        }
        .empty-tip {
            display: block;
            color: var(--font-color-red);
            font-size: 12px;
        }
    }
}
</style>